<template>
    <my-dialog title="Date Code" :ok="updateDateCode">
        <div class="q-pa-sm">
            <q-input  borderless class=" input-css"  label="Year" v-model="year" :options="yearOptions"></q-input>
        </div>
        <div class="q-pa-sm">
            <q-select  borderless class=" input-css" label="Months" v-model="months" :options="monthOptions"></q-select>
        </div>
    </my-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import MyDialog from './container/MyDialog.vue';

const yearOptions = ref('')
const monthOptions = ref(['01','02','03','04','05','06','07','08','09','10','11','12'])

const year = ref('')
const months = ref('')
const dateCode = ref('')

year.value = new Date().getFullYear().toString()

const emit = defineEmits(['update'])

function updateDateCode(){
    dateCode.value = year.value +'/' + months.value
    emit('update', dateCode.value)
}

</script>
<style scoped>
.input-css{
    height: 4rem;
}
</style>